<template>
    <div class="goods">
		<div class="actions">
			<div class="search">
				<a-input-search placeholder="请输入关键词" style="width: 200px" @search="onSearch" />
			</div>
			<a-upload
				name="file"
				:action="uploadUrl"
				@change="handleChange"
				style="display:inline-block;"
			>
				<a-button type="primary"><a-icon type="upload" />导入Excel</a-button>
			</a-upload>
			<a-button type="primary" @click="showBoard=true" :disabled="selectedRowKeys.length===0">
				<a-icon type="download" />导出到粘贴板
			</a-button>
			<a-button type="danger" @click="multiDel"><a-icon type="delete" />删除</a-button>
			<a-button type="danger" @click="multiOutDate"><a-icon type="delete" />删除过期商品</a-button>
		</div>
        
		<div class="table-wrap">
			<a-table 
			:columns="columns" 
			:data-source="list" 
			:rowKey="record=>record.id" 
			:pagination="pageSetting"	
			:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
			@change="tableChange">
				<template slot="goods_name" slot-scope="text,item">
				<a target="_blank" rel="noopener noreferrer" :href="item.ticket_short_link">{{ text }}</a>
				</template>
				<template slot="img_url" slot-scope="text">
					<img :src="text" style="height:40px" alt="" @click="preview_url=text;visible=true;" />
				</template>
				<template slot="last_price" slot-scope="text,record">
					{{(record.price-record.ticket_price).toFixed(2)}}
				</template>
				<span slot="ticket_end_time" slot-scope="text,item" :class="{outDate:isOutDate(item.ticket_end_time)}">{{text?text.substring(0,10):''}}</span>
				<template slot="operation" slot-scope="text,item">
					<a-button type="link" color="#f00" @click="changeSpecial(item)">{{item.is_special===0?'精选':'取消'}}</a-button>
					<a-button type="link" color="#f00" @click="del(item.id)">删除</a-button>
				</template>
			</a-table>
		</div>

		<a-modal v-model="visible" title="Modal" :centered="true" width="840px" :footer="null">
			<img :src="preview_url" style="max-width:792px;" alt="" />
		</a-modal>

		<a-modal v-model="showBoard" title="复制到黏贴版" :centered="true" width="840px" :footer="null">
			<div class="item" v-for="(item,key) in exportNodes" :key="key">
				<div>{{item.goods_name}}</div>
				<div>{{'http://www.hahaguai.top/index.html#/goods?id='+item.id}}</div>
			</div>
		</a-modal>
    </div>
</template>

<script>
import config from '../../until/configs.js';
import { messageTips } from '../../until/tools.js';
const columns = [
	{
		title: '商品',
		dataIndex: 'goods_name',
		key: 'goods_name',
		scopedSlots: { customRender: 'goods_name' },
	},
	{
		title: '价格',
		dataIndex: 'price',
		key: 'price',
		width: 80,
		align:'right'
	},
	{
		title: '优惠券值',
		dataIndex: 'ticket_price',
		key: 'ticket_price',
		width: 100,
		align:'right'
	},
	{
		title: '券后价',
		dataIndex: 'last_price',
		key: 'last_price',
		width: 80,
		scopedSlots: { customRender: 'last_price' },
		align:'right'
	},
	{
		title: '佣金',
		dataIndex: 'commission',
		key: 'commission',
		width: 80,
		scopedSlots: { customRender: 'commission' },
		align:'right'
	},
	{
		title: '有效期',
		dataIndex: 'ticket_end_time',
		key: 'ticket_end_time',
		width: 120,
		scopedSlots: { customRender: 'ticket_end_time' },
	},
	{
		title: '图片',
		dataIndex: 'img_url',
		key: 'img_url',
		scopedSlots: { customRender: 'img_url' },
	},
	{
		title: '操作',
		dataIndex: 'operation',
		key: 'operation',
		width: 180,
		scopedSlots: { customRender: 'operation' },
		align:'center'
	}
];

export default {
    data() {
        return {
			columns,
			visible:false,
			list:[],
			pageCount:0,
			currentPage:1,
			preview_url:'',
			selectedRowKeys: [],
			uploadUrl:config.baseUrl+'admin/index/upload',
			exportNodes:'',
			showBoard:false
        }
	},
	computed:{
		pageSetting(){
			let pageSize=0;
			if(this.pageCount) {
				pageSize = this.pageCount;
			}
			return {
				showQuickJumper:true,
				hideOnSinglePage:true,
				showTotal:()=>`共${pageSize}条`,
				total:pageSize,
			}
		},
	},
	methods:{
		onSelectChange(selectedRowKeys,nodes) {
			this.selectedRowKeys = selectedRowKeys;
			//this.exportHtml='';
			this.exportNodes = nodes;
		},
		changeSpecial(item) {
			let _flag;
			if(item.is_special===0) {
				_flag=1;
			} else {
				_flag = 0;
			}
			this.$http.setGoodsSpecial({id:item.id,flag:_flag}).then(res=>{
				if(res.success) {
					item.is_special = _flag;
				}
			})
		},
		del(id) {
			let that = this;
			this.$confirm({
				title: config.delTips.title,
				content: config.delTips.title,
				centered:true,
				onOk() {
					that.$http.delGoods({id}).then(res=>{
						if(res.success) {
							messageTips('删除成功！',3);
							that.getList(that.currentPage);
						}
					});
				},
				onCancel() {},
			});
			
		},
		multiDel() {
			let that = this;
			this.$confirm({
				title: config.delTips.title,
				content: config.delTips.title,
				centered:true,
				onOk() {
					that.$http.delGoods({id:that.selectedRowKeys.join(',')}).then(res=>{
						if(res.success) {
							messageTips('删除成功！',3);
							that.getList(that.currentPage);
						}
					});
				},
				onCancel() {},
			});
		},
		multiOutDate() {
			let that = this;
			this.$confirm({
				title: config.delTips.title,
				content: '确定要删除过期商品吗？',
				centered:true,
				onOk() {
					that.$http.delOutDateGoods().then(res=>{
						if(res.success) {
							messageTips('删除成功！',3);
							that.getList(that.currentPage);
						}
					});
				},
				onCancel() {},
			});
		},
		handleChange(info) {
			if (info.file.status === 'done') {
				messageTips('导入成功',3);
				this.getList();	
			}
		},
		getList(page) {
			this.$http.getGoods({page}).then(res=>{
				if(res) {
					this.list = res.data;
					this.pageCount = res.total;
					this.currentPage = res.current_page;
				}				
			});
		},
		isOutDate(endDate) {
			var endTime=new Date(endDate);
			var currentTime=new Date();
			if(endTime.getTime()<currentTime.getTime()) {
				return true;
			} else {
				return false;
			}
		},
		tableChange(e) {
			this.getList(e.current);
		},
		onSearch() {
			
		}
	},
    mounted() {
		this.getList();
    }
}
</script>
<style lang="scss">
	.goods {
		.ant-upload-list {
			display: none;
		}
	}
</style>
<style lang="scss">
    @import '../../scss/goods.scss';
</style>